<!-- @format -->

<template>
  <view class="tab-example">
    <text class="example-title">标签页组件示例</text>

    <!-- 基础用法 -->
    <view class="example-section">
      <text class="section-title">基础用法</text>
      <comp-tab v-model="active1">
        <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
        <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
        <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
      </comp-tab>
    </view>

    <!-- 通过标签数据设置 -->
    <view class="example-section">
      <text class="section-title">通过标签数据设置</text>
      <comp-tab v-model="active2" :tabs="tabs">
        <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
        <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
        <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
      </comp-tab>
    </view>

    <!-- 标签栏样式 -->
    <view class="example-section">
      <text class="section-title">标签栏样式</text>
      <view class="sub-section">
        <text class="sub-title">线条样式</text>
        <comp-tab v-model="active3" type="line">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
      <view class="sub-section">
        <text class="sub-title">卡片样式</text>
        <comp-tab v-model="active4" type="card">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
      <view class="sub-section">
        <text class="sub-title">文本样式</text>
        <comp-tab v-model="active5" type="text">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
    </view>

    <!-- 标签尺寸 -->
    <view class="example-section">
      <text class="section-title">标签尺寸</text>
      <view class="sub-section">
        <text class="sub-title">小尺寸</text>
        <comp-tab v-model="active6" size="small">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
      <view class="sub-section">
        <text class="sub-title">中尺寸（默认）</text>
        <comp-tab v-model="active7" size="medium">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
      <view class="sub-section">
        <text class="sub-title">大尺寸</text>
        <comp-tab v-model="active8" size="large">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
    </view>

    <!-- 标签位置 -->
    <view class="example-section">
      <text class="section-title">标签位置</text>
      <view class="sub-section">
        <text class="sub-title">顶部（默认）</text>
        <comp-tab v-model="active9" position="top">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
      <view class="sub-section">
        <text class="sub-title">底部</text>
        <comp-tab v-model="active10" position="bottom">
          <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
          <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
          <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
        </comp-tab>
      </view>
    </view>

    <!-- 徽标和图标 -->
    <view class="example-section">
      <text class="section-title">徽标和图标</text>
      <comp-tab v-model="active11">
        <comp-tab-panel name="1" title="标签 1" badge="5"
          >内容 1</comp-tab-panel
        >
        <comp-tab-panel name="2" title="标签 2" badge="10"
          >内容 2</comp-tab-panel
        >
        <comp-tab-panel name="3" title="标签 3" icon="★">内容 3</comp-tab-panel>
      </comp-tab>
    </view>

    <!-- 禁用标签 -->
    <view class="example-section">
      <text class="section-title">禁用标签</text>
      <comp-tab v-model="active12">
        <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
        <comp-tab-panel name="2" title="标签 2" disabled>内容 2</comp-tab-panel>
        <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
      </comp-tab>
    </view>

    <!-- 切换动画 -->
    <view class="example-section">
      <text class="section-title">切换动画</text>
      <comp-tab v-model="active13" animated>
        <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
        <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
        <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
      </comp-tab>
    </view>

    <!-- 自定义颜色 -->
    <view class="example-section">
      <text class="section-title">自定义颜色</text>
      <comp-tab v-model="active14" color="#07c160">
        <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
        <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
        <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
      </comp-tab>
    </view>

    <!-- 事件监听 -->
    <view class="example-section">
      <text class="section-title">事件监听</text>
      <comp-tab v-model="active15" @click="onClick" @change="onChange">
        <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
        <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
        <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
      </comp-tab>
      <view class="event-log">
        <view v-for="(log, index) in eventLogs" :key="index" class="log-item">
          {{ log }}
        </view>
      </view>
    </view>

    <!-- 方法调用 -->
    <view class="example-section">
      <text class="section-title">方法调用</text>
      <comp-tab v-model="active16" ref="tabRef">
        <comp-tab-panel name="1" title="标签 1">内容 1</comp-tab-panel>
        <comp-tab-panel name="2" title="标签 2">内容 2</comp-tab-panel>
        <comp-tab-panel name="3" title="标签 3">内容 3</comp-tab-panel>
      </comp-tab>
      <view class="button-row">
        <button class="action-button" @click="scrollToTab('1')">
          滚动到标签1
        </button>
        <button class="action-button" @click="scrollToTab('2')">
          滚动到标签2
        </button>
        <button class="action-button" @click="scrollToTab('3')">
          滚动到标签3
        </button>
        <button class="action-button" @click="setActiveTab('1')">
          激活标签1
        </button>
        <button class="action-button" @click="setActiveTab('2')">
          激活标签2
        </button>
        <button class="action-button" @click="setActiveTab('3')">
          激活标签3
        </button>
        <button class="action-button" @click="getActiveTab">
          获取当前标签
        </button>
      </view>
      <view v-if="activeTabInfo" class="active-info">
        当前激活的标签: {{ activeTabInfo }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CompTab from './Index.vue';
  import CompTabPanel from './TabPanel.vue';

  // 定义Tab项数据接口
  interface TabItem {
    name: string | number;
    title: string;
    disabled?: boolean;
    badge?: string | number;
    icon?: string;
  }

  // 基础用法
  const active1 = ref('1');

  // 通过标签数据设置
  const active2 = ref('1');
  const tabs = ref<TabItem[]>([
    { name: '1', title: '标签 1' },
    { name: '2', title: '标签 2' },
    { name: '3', title: '标签 3' },
  ]);

  // 标签栏样式
  const active3 = ref('1');
  const active4 = ref('1');
  const active5 = ref('1');

  // 标签尺寸
  const active6 = ref('1');
  const active7 = ref('1');
  const active8 = ref('1');

  // 标签位置
  const active9 = ref('1');
  const active10 = ref('1');

  // 徽标和图标
  const active11 = ref('1');

  // 禁用标签
  const active12 = ref('1');

  // 切换动画
  const active13 = ref('1');

  // 自定义颜色
  const active14 = ref('1');

  // 事件监听
  const active15 = ref('1');
  const eventLogs = ref<string[]>([]);

  const onClick = (name: string | number) => {
    eventLogs.value.push(`点击标签: ${name}`);
    if (eventLogs.value.length > 5) {
      eventLogs.value.shift();
    }
  };

  const onChange = (name: string | number) => {
    eventLogs.value.push(`切换到标签: ${name}`);
    if (eventLogs.value.length > 5) {
      eventLogs.value.shift();
    }
  };

  // 方法调用
  const active16 = ref('1');
  const tabRef = ref<InstanceType<typeof CompTab> | null>(null);
  const activeTabInfo = ref('');

  const scrollToTab = (name: string | number) => {
    if (tabRef.value) {
      tabRef.value.scrollTo(name);
    }
  };

  const setActiveTab = (name: string | number) => {
    if (tabRef.value) {
      tabRef.value.setActiveName(name);
    }
  };

  const getActiveTab = () => {
    if (tabRef.value) {
      activeTabInfo.value = String(tabRef.value.getActiveName());
    }
  };
</script>

<style lang="scss">
  .tab-example {
    padding: 20px;

    .example-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      display: block;
    }

    .example-section {
      margin-bottom: 30px;

      .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        display: block;
      }

      .sub-section {
        margin-bottom: 15px;

        .sub-title {
          font-size: 14px;
          margin-bottom: 8px;
          display: block;
        }
      }
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;

      .action-button {
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 6px 12px;
        font-size: 14px;
        background-color: #1989fa;
        color: #fff;
        border: none;
        border-radius: 4px;
      }
    }

    .event-log {
      margin-top: 10px;
      padding: 10px;
      background-color: #f8f8f8;
      border-radius: 4px;

      .log-item {
        font-size: 14px;
        line-height: 1.5;
        color: #333;
      }
    }

    .active-info {
      margin-top: 10px;
      font-size: 14px;
      color: #1989fa;
    }
  }
</style>
